<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>学习乐园管理</title>
    <link rel="stylesheet" href="../../lib/element-ui/theme-chalk/index.css">
    <link rel="stylesheet" href="../../lib/vxe-table/index.css">
    <link rel="stylesheet" href="../../lib/vxe-table-plugin-element/style.css">
    <link rel="stylesheet" href="../../lib/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../../static/css/skins.css">
    <script type="text/javascript" src="../../lib/vue/vue.js"></script>
    <script type="text/javascript" src="../../lib/xe-utils/xe-utils.js"></script>
    <script type="text/javascript" src="../../lib/element-ui/index.js"></script>
    <script type="text/javascript" src="../../lib/vxe-table/index.js"></script>
    <script type="text/javascript" src="../../lib/vxe-table-plugin-element/index.js"></script>
    <script type="text/javascript" src="../../lib/xlsx/xlsx.full.min.js"></script>
    <script type="text/javascript" src="../../lib/vxe-table-plugin-export-xlsx/index.min.js"></script>
    <script type="text/javascript" src="../../lib/xe-ajax/xe-ajax.js"></script>
    <script type="text/javascript" src="../../static/js/jquery.min.js"></script>
    <script type="text/javascript" src="../../static/js/webApi.js"></script>
    <script type="text/javascript" src="../../static/js/tool.js"></script>
    <script type="text/javascript" charset="utf-8" src="../../static/UEditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="../../static/UEditor/ueditor.all.js"></script>
    <script type="text/javascript" charset="utf-8" src="../../static/UEditor/lang/zh-cn/zh-cn.js"></script>
    <style type="text/css">
        /*
            找到html标签、body标签，和挂载的标签
            都给他们统一设置样式
        */
        html,
        body,
        #app,
        .el-container {
            /*设置内部填充为0，几个布局元素之间没有间距*/
            padding: 0px;
            /*外部间距也是如此设置*/
            margin: 0px;
            /*统一设置高度为100%*/
            height: 100%;
        }

        .el-main {
            padding: 4px;
        }
        .el-icon-search{
            color: #409EFF;
        }
        .el-icon-refresh-right{
            color: #409EFF;
        }
        [v-cloak] {
            display: none;
        }

        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 108px;
            height: 108px;
            line-height: 108px;
            text-align: center;
        }
        .avatar {
            width: 108px;
            height: 108px;
            display: block;
        }
        .el-form-item--mini .el-form-item__content, .el-form-item--mini .el-form-item__label{
            line-height: 25px;
        }
    </style>
</head>
<body>
<el-container id="app">
    <el-main>
        <el-form :inline="true" :model="queryData" ref="queryData" label-width="80px" label-position="right"
                 size="mini" style="height: 35px" @submit.native.prevent>
            <el-form-item label="主题">
                <el-input v-model="queryData.title" placeholder="请输入关键字"></el-input>
            </el-form-item>
            <el-form-item label="内容关键字">
                <el-input v-model="queryData.content" placeholder="请输入关键字"></el-input>
            </el-form-item>
            <el-form-item label="发布人">
                <el-input v-model="queryData.sendUser" placeholder="请输入关键字"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button size="mini" icon="el-icon-search" @click="searchEvent">查询</el-button>
                <el-button size="mini" icon="el-icon-refresh-right" @click="searchEventA">重置</el-button>
            </el-form-item>
        </el-form>

        <vxe-grid border ref="xGrid" @page-change="handlePageChange" resizable show-overflow
                  highlight-current-row="true" keep-source :height="tableHeight" size="mini" :checkbox-config="tableRadio"
                  :pager-config="tablePage" :data="tableData" :header-cell-style="{'text-align':'center'}"
                  :loading="dataLoading" :toolbar="tableToolbar" :export-config="tableExport"
                  @cell-dblclick="cellDBLClickEvent" :edit-config="{trigger:'click', mode:'row'}"
                  @toolbar-button-click="toolbarButtonClickEvent" :sort-config="{remot:true}" @sort-change="tableSortChange">
            <vxe-table-column type="checkbox" width="60" align="center"></vxe-table-column>
            <vxe-table-column field="id" title="序号" width="60" align="center">
            </vxe-table-column>
            <vxe-table-column field="title" title="主题" align="center">
            </vxe-table-column>
            <vxe-table-column field="content" title="内容" align="left">
            </vxe-table-column>
            <vxe-table-column field="sendUser" title="发表人" align="center">
            </vxe-table-column>
            <vxe-table-column field="coverImg" title="封面图片" width="120">
                <template #default="{ row }">
                    <el-popover placement="left" title trigger="hover">
                        <img
                                v-if="row.coverImg"
                                :src="row.coverImg"
                                :alt="row.coverImg"
                                style="max-height: 500px;max-width: 500px"
                        />
                        <img slot="reference" :src="row.coverImg" style="width: 100px;">
                    </el-popover>
                </template>
            </vxe-table-column>
            <vxe-table-column field="cUser" title="创建人" align="center">
            </vxe-table-column>
            <vxe-table-column field="cTime" title="创建时间" align="center" :formatter="formatDate">
            </vxe-table-column>
            <vxe-table-column field="sendOrgCode" title="发布部门编号" align="center">
            </vxe-table-column>
            <vxe-table-column field="sendOrgName" title="发布部门名称" align="center">
            </vxe-table-column>
        </vxe-grid>

        <vxe-modal ref="xModal" v-model="showEdit" :title="selectRow ? '编辑&保存' :'新增&保存'" width="800"
                   :loading="submitLoading" resize  id = "formWindow">
            <el-form :model="formData" :rules="formRules" ref="formData" label-width="120px" label-position="right"
                     size="mini">
                <template v-if="visible===true">
                    <el-form-item label="ID" prop="id">
                        <el-input v-model="formData.id"></el-input>
                    </el-form-item>
                </template>
                <el-form-item label="主题" prop="title">
                    <el-input type="text" v-model="formData.title" placeholder="请填写主题"
                              style="width: 620px;"
                              maxlength="100"
                              show-word-limit></el-input>
                </el-form-item>
                <el-form-item label="内容" prop="content">
                    <div id="contentEditor" v-model="formData.content" ></div>
                </el-form-item>
                <el-form-item label="封面图片" prop="coverImg">
                    <el-upload
                            class="avatar-uploader"
                            :action="this.uploadUrl"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="附件" prop="atts">
                    <el-upload
                            class="upload-demo"
                            :action="this.uploadUrl"
                            multiple
                            :file-list="filelist"
                            :on-success="handleFileSuccess"
                            :on-remove="handleRemove"
                            :before-upload="beforeFileUpload">
                        <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                </el-form-item>
                <el-form-item style="text-align: right;">
                    <el-button type="primary" icon="el-icon-folder" @click="submitEvent('formData')"
                               :disabled="disabled" v-cloak>保存</el-button>
                    <el-button type="warning" icon="el-icon-refresh" @click="resetEvent('formData')" v-cloak>
                        重置
                    </el-button>
                    <el-button type="warning" icon="el-icon-switch-button" @click="closeEvent('formData')" v-cloak>
                        退出
                    </el-button>
                </el-form-item>
            </el-form>
        </vxe-modal>
    </el-main>
</el-container>
</body>
<script type="text/javascript">
    window.onload = function () {
        var main = {
            data() {
                return {
                    //排序
                    prop: '',
                    order: '',
                    dataLoading: false,
                    loading: false,
                    disabled: false,
                    visible: false,
                    tableHeight: '100%',
                    departOptions: [],
                    tableData: [],
                    contentEditor: null,
                    uploadUrl: "",
                    imageUrl: "",
                    tablePage: {
                        perfect: true,
                        total: 0,
                        currentPage: 1,
                        pageSize: 30,
                        align: 'left',
                        pageSizes: [30, 50, 100, 200],
                        layouts: ['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump',
                            'Total'
                        ],
                    },
                    tableToolbar: {
                        id: 'toolbar',
                        size: 'mini',
                        perfect: true,
                        buttons: [],
                    },
                    tableExport: {
                        filename: 'export',
                        sheetName: 'Sheet1',
                        type: 'xlsx',
                        // 自定义类型
                        types: ['xlsx', 'csv', 'html', 'xml', 'txt']
                    },
                    tableRadio: {
                        trigger: 'row',
                        highlight: true
                    },
                    submitLoading: false,
                    selectRow: null,
                    showEdit: false,
                    queryData: {
                        theme: "",
                        content: "",
                        sendUser: ""
                    },
                    filelist:[],
                    formData: {
                        id: "",
                        title: "",
                        content: "",
                        sendUser: "",
                        coverImg: "",
                        atts:[]
                    },
                    formRules: {
                        title: [{
                            required: true,
                            message: '请输入主题'
                        },
                            {
                                min: 1,
                                max: 100,
                                message: '长度在1到100个字符'
                            }
                        ],
                        phone: [
                            {
                                min: 11,
                                max: 11,
                                message: '长度在11个字符'
                            }
                        ]
                    }
                }
            },
            created() {
                this.findList();
                this.getBtn();
                this.uploadUrl = window.curl + '/attach/uploadAtt';
                UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
                UE.Editor.prototype.getActionUrl = function(action) {
                    if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadvideo') {
                        let path = window.curl + '/attach/uploadUeditorAtt';
                        return path; //调用后台接口上传图片
                    } else {
                        return this._bkGetActionUrl.call(this, action);
                    }
                }
                this.contentEditor = UE.getEditor('contentEditor', {
                    initialFrameWidth : '95%',
                    initialFrameHeight : 250,
                    elementPathEnabled : false, //删除元素路径
                    pasteplain : true, /* 纯文本粘贴 */
                    autoHeightEnabled : true,/* 启用右侧滚轮,默认是true自动长高模式*/
                    autoFloatEnabled : true
                });
            },
            mounted() {
                this.tableHeight = window.innerHeight - this.$refs.xGrid.$el.offsetTop - 5;
            },
            methods: {
                searchEvent() {
                    this.findList();
                },
                searchEventA() {
                    this.queryData.theme = "";
                    this.queryData.content = "";
                    this.queryData.sendUser = "";
                    this.findList();
                },
                getBtn() {
                    this.tableToolbar.buttons = []
                    let bts = Tool.getButton()
                    let btns = []
                    this.tableToolbar.buttons = btns.concat(bts)
                },
                //分页
                handlePageChange({
                                     currentPage,
                                     pageSize
                                 }) {
                    this.tablePage.currentPage = currentPage
                    this.tablePage.pageSize = pageSize
                    this.findList()
                },
                findList() {
                    let queryParams = Object.assign({
                        page: this.tablePage.currentPage,
                        rows: this.tablePage.pageSize,
                        title: this.queryData.title,
                        content: this.queryData.content,
                        sendUser: this.queryData.sendUser
                    });
                    this.dataLoading = true;
                    var object = this;
                    webApi("/park/list", "post", queryParams, function (data) {
                        object.tableData = data.data.list;
                        object.tablePage.total = data.data.total
                        object.dataLoading = false;
                    }, function (data) {
                        object.tableData = [];
                        object.tablePage.total = 0
                        object.dataLoading = false;
                    });
                },
                searchEvent(formName, acType) {
                    if (acType == 0) {
                        this.queryData.title = "";
                        this.queryData.content = "";
                        this.queryData.sendUser = "";
                    }
                    this.tablePage.currentPage = 1
                    this.findList()
                },
                formatDate({cellValue}) {
                    return XEUtils.toDateString(cellValue, 'yyyy-MM-dd HH:mm:ss')
                },
                toolbarButtonClickEvent({code}, event) {
                    switch (code) {
                        case 'reset':
                            this.searchEvent(this.queryData, 0)
                            break;
                        case 'search':
                            this.searchEvent(this.queryData, 1)
                            break;
                        case 'btnInsert':
                            this.insertEvent();
                            break;
                        case 'btnUpdate':
                            if (this.$refs.xGrid.getCheckboxRecords().length == 1) {
                                let row = this.$refs.xGrid.getCheckboxRecords()
                                this.editEvent(row[0]);
                            } else if (this.$refs.xGrid.getCheckboxRecords().length > 1) {
                                this.$message({
                                    message: "数据大于一条，无法修改",
                                    type: 'warning',
                                    center: true
                                });
                            } else {
                                this.$message({
                                    message: "请选择一行数据",
                                    type: 'warning',
                                    center: true
                                });
                            }
                            break;
                        case 'btnDelete':
                            var row = this.$refs.xGrid.getCheckboxRecords();
                            // console.log(row)
                            if (row.length > 0) {
                                this.removeEvent(row);
                            } else {
                                this.$message({
                                    message: "请选择需要删除的数据行",
                                    type: 'warning',
                                    center: true
                                });
                            }
                            break;
                        case 'btnExport':
                            this.$refs.xGrid.exportData({
                                filename: '菜单列表',
                                sheetName: 'Sheet1',
                                type: 'xlsx'
                            });
                            break;
                    }
                },
                insertEvent() {
                    this.resetEvent();
                    this.selectRow = null;
                    this.showEdit = true;
                },
                submitEvent(formName) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            this.submitLoading = true;
                            this.disabled = true;
                            this.formData.content = UE.getEditor('contentEditor').getContent()
                            let params = Object.assign(this.formData);
                            let that = this;
                            webApi('/park/save', 'post', params, function (data) {
                                if (data.code == 0) {
                                    that.findList();
                                    that.$message({
                                        message: data.msg,
                                        type: 'success',
                                        center: true
                                    });
                                    that.showEdit = false;
                                    that.resetEvent();
                                } else {
                                    that.$message({
                                        message: data.msg,
                                        type: 'error',
                                        center: true
                                    });
                                }
                                that.disabled = false;
                            }, function (xhr, type, errorThrown) {});
                            this.submitLoading = false;
                        } else {
                            return false;
                        }
                    });
                },
                resetEvent() {
                    this.formData = {
                        id: "",
                        title: "",
                        content: "",
                        coverImg: "",
                        atts:[]
                    };
                    this.filelist=[];
                    this.imageUrl = "";
                    this.contentEditor.setContent("");
                },
                closeEvent(formName) {
                    this.showEdit = false;
                },
                editEvent(row) {
                    this.formData = {
                        id: row.id,
                        title: row.title,
                        content: row.content,
                        sendUser: row.sendUser,
                        coverImg: row.coverImg,
                        atts:row.atts
                    };
                    this.imageUrl = row.coverImg
                    this.contentEditor.setContent(this.formData.content);
                    this.filelist=[];
                    if(row.atts||''){
                        for (var i in row.atts){
                            this.filelist.push({'id':row.atts[i].id,'name':row.atts[i].attName,'url':row.atts[i].dldLink})
                        }
                    }
                    this.selectRow = row;
                    this.showEdit = true;

                },
                removeEvent(row) {
                    this.$XModal.confirm('您确定要删除该数据?').then(type => {
                        if (type === 'confirm') {
                            this.submitLoading = true;
                            let that = this
                            let ids = ""
                            row.forEach(item => {
                                ids += item.id + ","
                            });
                            let params = Object.assign({
                                id: ids
                            });
                            webApi('/park/delete', 'get', params, function (data) {
                                if (data.code == 0) {
                                    that.findList()
                                    that.$message({
                                        message: data.msg,
                                        type: 'success',
                                        center: true
                                    });
                                    that.showEdit = false;
                                } else {
                                    that.$message({
                                        message: data.msg,
                                        type: 'error',
                                        center: true
                                    });
                                }
                                that.disabled = false;
                            }, function (xhr, type, errorThrown) {});
                            this.submitLoading = false;
                        }
                    });
                },
                handleAvatarSuccess(res, file) {
                    if(res.code == 200){
                        this.formData.coverImg = res.data.url
                        this.imageUrl = URL.createObjectURL(file.raw);
                    }
                },
                beforeAvatarUpload(file) {
                    const isJPG = file.type === 'image/jpeg';
                    const isLt2M = file.size / 1024 / 1024 < 2;
                    if (!isLt2M) {
                        this.$message.error('上传头像图片大小不能超过 2MB!');
                    }
                    return isLt2M;
                },
                handleFileSuccess(res, file){
                    if(res.code == 200){
                        this.formData.atts.push({'attName':res.data.title,'attPath':res.data.viewUrl,'dldLink':res.data.url});
                    }
                },
                handleRemove(file, fileList) {
                    if(file.response||''){
                        console.log('1')
                        XEUtils.remove(this.formData.atts, item => item.dldLink === file.response.data.url)
                    }else{
                        console.log('2')
                        XEUtils.remove(this.formData.atts, item => item.id === file.id)
                    }
                    console.log(this.formData.atts)
                },
                beforeFileUpload(file) {
                },
                cellDBLClickEvent({row}) {
                    this.editEvent(row);
                },
                checkColumnMethod({column}) {
                    if (['companyNo', 'name'].includes(column.property)) {
                        return false
                    }
                    return true
                },
                //表头列排序
                tableSortChange(column, prop, order) {
                    //点击排序按钮后拿到column.order，可以发送column.order给后台，后台再根据什么排序来返回排序过后的数据
                    console.log(column + '---' + column.prop + '---' + column.order)
                    this.order=column.order;
                    this.prop=column.prop;
                    this.findList();
                }
            }
        };

        var vue = Vue.extend(main);
        new vue().$mount('#app');
    }
</script>
</html>